<template>
  <!--期刊管理-->
  <div class="wrapper">
    <!--添加-->
    <div style="padding-bottom: 10px">
      <Button v-show="table" type="success" size="small" @click="show1">添加</Button>
      <Button v-show="table2" type="success" size="small" @click="back">返回</Button>
    </div>
    <!--表格-->
    <div v-show="table">
      <Table border stripe :columns="columns" :data="data"></Table>
      <!--Vue组件-->
      <div class="page" style="padding-top: 40px">
        <paging :all="all" @returnValue="returnValue"></paging>
      </div>
    </div>
    <!--公用-->
    <div v-show="show">
      <Row>
        <i-col span="12">
          <div class="add_style">
            <span>中文名称:</span>
            <Input v-model="formItem.periodicals.cname" placeholder="" style="width: 400px"></Input>
          </div>
          <div class="add_style">
            <span>创刊时间:</span>
            <Input v-model="formItem.periodicals.startTime " placeholder="" style="width: 400px"></Input>
          </div>
          <div class="add_style">
            <span>复合影响因子:</span>
            <Input v-model="formItem.periodicals.combinedIf" placeholder="" style="width: 400px"></Input>
          </div>
          <div class="add_style">
            <span>主管单位:</span>
            <Input v-model="formItem.periodicals.governingBody" placeholder="" style="width: 400px"></Input>
          </div>
          <div class="add_style">
            <span>主办单位:</span>
            <Input v-model="formItem.periodicals.sponsor" placeholder="" style="width: 400px"></Input>
          </div>
          <div class="add_style">
            <span>编辑单位:</span>
            <Input v-model="formItem.periodicals.editorialOffice" placeholder="" style="width: 400px"></Input>
          </div>
          <div class="add_style">
            <span>现任主编:</span>
            <Input v-model="formItem.periodicals.editorInThief" placeholder="" style="width: 400px"></Input>
          </div>
          <div class="add_style">
            <span>官网地址:</span>
            <Input v-model="formItem.periodicals.uri" placeholder="" style="width: 400px"></Input>
          </div>
          <div class="add_style">
            <span>专业方向:</span>
            <Select v-model="formItem.cid" multiple style="width:400px">
              <Option v-for="item in professionalPeriodicals" :value="item.value" :key="item.value">{{ item.label }}
              </Option>
            </Select>
          </div>
          <div class="add_style">
            <span>核心:</span>
            <Select v-model="formItem.dbid" multiple style="width:400px">
              <Option v-for="item in storage" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>
          <div class="add_style">
            <span>期刊封面图片:</span>
            <div>
              <upload :echo="echo" @returnValue="returnValue1"></upload>
            </div>
          </div>
          <!--          <div class="add_style">
                      <span>二维码图片:</span>
                      <div>
                        <upload :echo="echo1" @returnValue="returnValue2"></upload>
                      </div>
                    </div>-->
        </i-col>
        <i-col span="12">
          <div class="add_style">
            <span>外文名称:</span>
            <Input v-model="formItem.periodicals.ename" placeholder="" style="width: 400px"></Input>
          </div>
          <div class="add_style">
            <span>出版周期:</span>
            <Select v-model="formItem.periodicals.publicationCycle" style="width:400px">
              <Option v-for="item in publicationCycle" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>
          <div class="add_style">
            <span>期刊级别:</span>
            <Select v-model="formItem.periodicals.level" style="width:400px">
              <Option v-for="item in level" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>
          <div class="add_style">
            <span>审稿周期:</span>
            <Select v-model="formItem.periodicals.reviewCycle" style="width:400px">
              <Option v-for="item in reviewCycle" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>
          <div class="add_style">
            <span>见刊时间:</span>
            <Select v-model="formItem.periodicals.publicationTime" style="width:400px">
              <Option v-for="item in publicationTime" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>
          <div class="add_style">
            <span>期刊偏好:</span>
            <Select v-model="journalPreferences" multiple style="width:400px">
              <Option v-for="item in journalPreference" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>
          <div class="add_style">
            <span>否是联盟会员:</span>
            <Select v-model="formItem.periodicals.member" style="width:400px">
              <Option v-for="item in member" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>
          <div class="add_style">
            <span>是否开放绿色通道:</span>
            <Select v-model="formItem.periodicals.greenChannel" style="width:400px">
              <Option v-for="item in greenChannel" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>
          <div class="add_style">
            <span>是否有商业合作:</span>
            <Select v-model="formItem.periodicals.businessCooperation" style="width:400px">
              <Option v-for="item in businessCooperation" :value="item.value" :key="item.value">{{ item.label }}
              </Option>
            </Select>
          </div>
          <div class="add_style">
            <span>国内刊号:</span>
            <Input v-model="formItem.periodicals.cn" placeholder="" style="width: 400px"></Input>
          </div>
          <div class="add_style">
            <span>国际刊号:</span>
            <Input v-model="formItem.periodicals.issn" placeholder="" style="width: 400px"></Input>
          </div>
          <div class="add_style">
            <span>邮发代号:</span>
            <Input v-model="formItem.periodicals.postalCode"  placeholder="" style="width: 400px"></Input>
          </div>
          <div class="add_style">
            <span>编辑部地址:</span>
            <Input v-model="formItem.periodicals.addr" placeholder="" style="width: 400px"></Input>
          </div>
          <div class="add_style">
            <span>是否优秀期刊:</span>
            <Select v-model="formItem.periodicals.peid" style="width:400px">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>
          <div class="add_style">
            <span>简介:</span>
            <Input v-model="formItem.periodicals.intro" type="textarea" :rows="10" style="width: 400px"/>
          </div>
        </i-col>
      </Row>
      <!--添加-->
      <div v-show="addBtn" class="add_style">
        <Button size="small" type="primary" @click="handleSubmit()">保存</Button>
        <Button size="small" type="primary" @click="back">取消</Button>
      </div>
      <!--编辑-->
      <div v-show="compileBtn" class="add_style">
        <Button size="small" type="primary" @click="handleSubmit1()">保存</Button>
        <Button size="small" type="primary" @click="back">取消</Button>
      </div>
    </div>
    <!--是否确定删除-->
    <Modal v-model="modal2" width="360">
      <div style="text-align:center">
        <p>删除不可恢复，是否确定删除？</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long @click="notarizeRemove">删除</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import upload from '../module/upload.vue';
  import paging from '../module/paging.vue';

  export default {
    components: {
      upload, paging
    },
    data() {
      return {
        URL: this.$api.url,
        /*分页*/
        all: 1,
        cur: 1,
        /*查询url*/
        inquireurl: this.$api.url + '/periodicals/admin/list/',
        /*公用*/
        show: false,
        /*添加按钮*/
        table: true,
        addBtn: false,
        /*返回按钮*/
        table2: false,
        /*编辑按钮*/
        compileBtn: false,
        /*表单*/
        formItem: {
          periodicals: {
            createUser: 1,
            cname: '',
            ename: '',
            cn: '',
            sponsor: '',
            postalCode: '',
            addr: '',
            /*因子*/
            combinedIf: '',
            /*等级*/
            level: '',
            editorialOffice: '',
            governingBody: '',
            peid: '',
            intro: '',
            /*周期*/
            publicationCycle: '',
            /*创刊时间*/
            startTime: '',
            editorInThief: '',
            issn: '',
            uri: '',
            /*审稿周期*/
            reviewCycle: '',
            /*见刊时间*/
            publicationTime: '',
            /*期刊偏好*/
            journalPreference: '',
            /*否是联盟会员*/
            member: '',
            /*是否开放绿色通道*/
            greenChannel: '',
            /*是否有商业合作*/
            businessCooperation: '',
          },
          cid: [],
          dbid: [],
        },
        /*上传图片*/
        file: '',
        echo: '',

        qrFile:'',
        echo1:'',
        /*是否优秀期刊*/
        cityList: [
          {
            value: 1,
            label: '是'
          },
          {
            value: 0,
            label: '否'
          },
        ],
        /*专业期刊*/
        professionalPeriodicals: [],
        /*入库*/
        storage: [],
        combinedIf: [],
        level: [],
        publicationCycle: [],
        /*表格*/
        columns: [
          {
            title: '期刊名',
            key: 'cname',
            width: 150,
          },
          {
            title: '主办单位',
            key: 'sponsor',
            align: 'center',
          },
          {
            title: '地址',
            key: 'addr',
            align: 'center',
          },
          {
            title: '是否优秀期刊',
            key: 'peid',
            align: 'center',
            width: 100,
            render: (h, params) => {
              let periodical = "";
              if (params.row.peid != 0) {
                periodical = "是";
              } else {
                periodical = "否";
              }
              return h('span', {}, periodical)
            }
          },
          {
            title: '状态(上架、下架)',
            key: '状态(上架、下架)',
            align: 'center',
            width: 100,
            render: (h, params) => {
              return h('i-switch', {
                props: {
                  value: params.row.status,
                },
                on: {
                  'on-change':(value)=>{
                    params.row.status = value;
                    this.switch(params.row)
                  }
                }
              })
            },
          },
          {
            title: '操作',
            key: '操作',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show2(params.index);
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                }, '删除'),
              ]);
            }
          },
        ],
        data: [],
        modal2: false,
        index: '',

        /*审稿周期*/
        reviewCycle: [
          {
            value: '半个月',
            label: '半个月'
          },
          {
            value: '1个月',
            label: '1个月'
          },
          {
            value: '1-3个月',
            label: '1-3个月'
          },
          {
            value: '3-6个月',
            label: '3-6个月'
          },
        ],
        /*见刊时间*/
        publicationTime: [
          {
            value: '不限定',
            label: '不限定'
          },
          {
            value: '1-3个月',
            label: '1-3个月'
          },
          {
            value: '3-6个月',
            label: '3-6个月'
          },
          {
            value: '6-12个月',
            label: '6-12个月'
          },
          {
            value: '12个月以上',
            label: '12个月以上'
          },
        ],
        /*期刊偏好*/
        journalPreferences: [],
        journalPreference: [
          {
            value: '基础研究',
            label: '基础研究'
          },
          {
            value: '管理类',
            label: '管理类'
          },
          {
            value: '临床类',
            label: '临床类'
          },
          {
            value: '个案',
            label: '个案'
          },
          {
            value: '多中心研究',
            label: '多中心研究'
          },
        ],
        /*否是联盟会员*/
        member: [
          {
            value: 1,
            label: '是'
          },
          {
            value: 0,
            label: '否'
          },
        ],
        /*是否开放绿色通道*/
        greenChannel: [
          {
            value: 1,
            label: '是'
          },
          {
            value: 0,
            label: '否'
          },
        ],
        /*是否有商业合作*/
        businessCooperation: [
          {
            value: 1,
            label: '是'
          },
          {
            value: 0,
            label: '否'
          },
        ]
      }
    },
    mounted() {
      window.scrollTo(0,0);
      this.get(this.inquireurl, this.cur)
    },
    methods: {
      /*分页*/
      returnValue(data) {
        this.cur = data;
        this.get(this.inquireurl, this.cur)
      },
      /*添加*/
      show1() {
        this.table = false;
        this.table2 = true;
        this.show = true;
        this.addBtn = true;
        this.$axios.get(this.$api.url + '/periodicals/category/admin/periodicalslist').then((res) => {
          let _this = this;
          _this.professionalPeriodicals = [];
          for (let i in res.data) {
            let data = {
              value: res.data[i].id,
              label: res.data[i].name,
            };
            _this.professionalPeriodicals.push(data)
          }
        });
        this.$axios.get(this.$api.url + '/periodicals/db/admin/PeriodicalsDb/list').then((res) => {
          let _this = this;
          _this.storage = [];
          for (let i in res.data) {
            let data = {
              value: res.data[i].id,
              label: res.data[i].name,
            };
            _this.storage.push(data)
          }
        });
        this.$axios.get(this.$api.url + '/dictionary/AdminRank').then((res) => {
          let _this = this;
          _this.level = [];
          for (let i in res.data.data) {
            let data = {
              value: res.data.data[i].id,
              label: res.data.data[i].value,
            };
            _this.level.push(data)
          }
        });
        this.$axios.get(this.$api.url + '/dictionary/AdminPeriod').then((res) => {
          let _this = this;
          _this.publicationCycle = [];
          for (let i in res.data.data) {
            let data = {
              value: res.data.data[i].id,
              label: res.data.data[i].value,
            };
            _this.publicationCycle.push(data)
          }
        });

      },
      /*编辑*/
      show2(index) {
        this.table = false;
        this.table2 = true;
        this.show = true;
        this.compileBtn = true;
        this.formItem.periodicals.id = this.data[index].id;
        this.$axios.get(this.$api.url + '/periodicals/category/admin/periodicalslist').then((res) => {
          let _this = this;
          _this.professionalPeriodicals = [];
          for (let i in res.data) {
            let data = {
              value: res.data[i].id,
              label: res.data[i].name,
            };
            _this.professionalPeriodicals.push(data)
          }
        });
        this.$axios.get(this.$api.url + '/periodicals/db/admin/PeriodicalsDb/list').then((res) => {
          let _this = this;
          _this.storage = [];
          for (let i in res.data) {
            let data = {
              value: res.data[i].id,
              label: res.data[i].name,
            };
            _this.storage.push(data)
          }
        });
        this.$axios.get(this.$api.url + '/dictionary/AdminRank').then((res) => {
          let _this = this;
          _this.level = [];
          for (let i in res.data.data) {
            let data = {
              value: res.data.data[i].id,
              label: res.data.data[i].value,
            };
            _this.level.push(data)
          }
        });
        this.$axios.get(this.$api.url + '/dictionary/AdminPeriod').then((res) => {
          let _this = this;
          _this.publicationCycle = [];
          for (let i in res.data.data) {
            let data = {
              value: res.data.data[i].id,
              label: res.data.data[i].value,
            };
            _this.publicationCycle.push(data)
          }
        });
        this.$axios.get(this.$api.url + '/periodicals/admin/' + this.data[index].id).then((res) => {
          this.echo = res.data.photo;
          this.echo1 = res.data.qrUri;
          this.formItem.periodicals.cname = res.data.cname;
          this.formItem.periodicals.ename = res.data.ename;
          this.formItem.periodicals.cn = res.data.cn;
          this.formItem.periodicals.sponsor = res.data.sponsor;
          this.formItem.periodicals.postalCode = res.data.postalCode;
          this.formItem.periodicals.addr = res.data.addr;
          this.formItem.periodicals.combinedIf = res.data.combinedIf;
          this.formItem.periodicals.level = parseFloat(res.data.level);
          this.formItem.periodicals.editorialOffice = res.data.editorialOffice;
          this.formItem.periodicals.governingBody = res.data.governingBody;
          this.formItem.periodicals.peid = res.data.peid;
          this.formItem.periodicals.intro = res.data.intro;
          this.formItem.periodicals.publicationCycle = res.data.publicationCycle;
          this.formItem.periodicals.startTime = res.data.startTime;
          this.formItem.periodicals.editorInThief = res.data.editorInThief;
          this.formItem.periodicals.issn = res.data.issn;
          this.formItem.periodicals.uri = res.data.uri;
          this.formItem.periodicals.status = res.data.status;

          this.formItem.periodicals.reviewCycle = res.data.reviewCycle;
          this.formItem.periodicals.publicationTime = res.data.publicationTime;
          this.journalPreferences = Array(res.data.journalPreference.split(','))[0];

          if (res.data.member == true) {
            this.formItem.periodicals.member = 1
          } else {
            this.formItem.periodicals.member = 0
          }

          if (res.data.greenChannel == true) {
            this.formItem.periodicals.greenChannel = 1
          } else {
            this.formItem.periodicals.greenChannel = 0
          }

          if (res.data.businessCooperation == true) {
            this.formItem.periodicals.businessCooperation = 1
          } else {
            this.formItem.periodicals.businessCooperation = 0
          }

          if (this.data[index].peid == 0) {
            this.formItem.periodicals.peid = 0;
          } else {
            this.formItem.periodicals.peid = 1;
          }
          this.formItem.periodicals.intro = res.data.intro;
          this.formItem.periodicals.publicationCycle = parseInt(res.data.publicationCycle);
          for (let i in res.data.periodicalsCategory) {
            this.formItem.cid.push(res.data.periodicalsCategory[i].id)
          }
          for (let i in res.data.periodicalsDb) {
            this.formItem.dbid.push(res.data.periodicalsDb[i].id)
          }
        });
      },
      /*删除*/
      remove(index) {
        this.modal2 = true;
        this.index = this.data[index];
      },
      notarizeRemove() {
        this.$axios.get(this.$api.url + "/periodicals/admin/delect/" + this.index.id).then((res) => {
          this.$Message.success(`删除成功!`);
          this.modal2 = false;
          this.get(this.inquireurl, this.cur)
        });
      },
      /*返回*/
      back() {
        this.$router.go(0)
      },
      /*新增-保存*/
      handleSubmit() {
        this.formItem.periodicals.journalPreference = String(this.journalPreferences);
        this.post(this.$api.url + '/periodicals/admin/add/periodicals')
      },
      /*编辑-保存*/
      handleSubmit1() {
        if (this.formItem.periodicals.peid == 1) {
          this.formItem.periodicals.peid = 1
        } else {
          this.formItem.periodicals.peid = 0
        }
        this.formItem.periodicals.journalPreference = String(this.journalPreferences);
        this.post(this.$api.url + '/periodicals/admin/update/periodicals');
      },
      /*图片*/
      returnValue1(data) {
        this.echo = '';
        this.file = data
      },
      returnValue2(data) {
        this.echo1 = '';
        this.qrFile = data
      },
      /*post请求*/
      post(url) {
        let _this = this;
        let formData = new FormData();
        formData.append("file", this.file);
        formData.append("qrFile", this.qrFile);
        formData.append("apd", JSON.stringify(this.formItem));
        let config = {
          headers:{'Content-Type':'multipart/form-data'}
        };
        this.$axios.post(url, formData,config).then(function (res) {
          _this.$router.go(0)
        })
      },
      /*get请求*/
      get(url, cur) {
        this.$axios.get(url + cur).then((res) => {
          this.data = [];
          this.all = res.data.totalPage;
          if (res.data.periodicalsExcellent.length > 0) {
            this.data = res.data.periodicalsExcellent
          }
          if (res.data.periodicals.length > 0) {
            for (let i in res.data.periodicals) {
              this.data.push(res.data.periodicals[i])
            }

          }
        });
      },
      /*状态*/
      switch(data){
        let a ={
          id:data.id,
          status:data.status,
        };
        this.$axios({
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=UTF-8'},
          data: JSON.stringify(a),
          url: this.URL+'/periodicals/admin/update/status',
        }).then((res) => {
          this.get(this.inquireurl, this.cur)
        })

      }
    },
  }
</script>

<style scoped>
  .wrapper {
    margin: 10px;
  }

  .add_style {
    padding-bottom: 10px;
  }

  .add_style > span {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    width: 140px;
  }
</style>
